<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="vue.js"></script>
</head>

<body>
  <div id="app">
    <home></home>
    <home2></home2>
  </div>
  <template id="home">
    <div>
      我是home组件
      {{ title }}
      {{ title2 }}
      <button @click="change">aaa</button>
    </div>
  </template>
  <template id="home2">
    <div>
      我是home组件
      {{ title }}
      {{ title2 }}
      <button @click="change">aaa</button>
    </div>
  </template>
  <script>
    let mixin1 = {
      data() {
        return {
          title: "我是混入中的数据"
        }
      },
      methods: {
        change() {
          alert("我是混入中的方法")
        }
      },
      computed: {
        title2() {
          return this.title + "计算属性"
        }
      }
    }
    let Home = {
      template: "#home",
      mixins: [mixin1]
    }
    let Home2 = {
      template: "#home2",
      mixins: [mixin1]
    }

    new Vue({
      el: "#app",
      components: {
        Home,
        Home2
      }
    })
  </script>
</body>

</html>